import { toThousands } from '@/utlis/utlis'
import React, { FC } from 'react'
import styled from "styled-components"
import Count from '../count'
import CrossWiseRate from '../crosswiseRate'
interface ICount {
    text: string,
    num: string,
    unit: string,
    upDownStatus: boolean,
    saleRate: string,
    ImgUrl: string,
    comparisonText?: string,
}

const Transport = styled.div<{height?:string}>`  
        display:flex;
        font-size: 1.4rem;
        width:30.1rem;
        height: 11.8rem;
        height: ${props=>props.height?props.height:'11.8rem'};
        color: #fff;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border:1px solid #0A4F89;
        background:rgba(6,31,79,.5);
        .top-text{
            flex: 1 1 20%;
        }
        .bottom-text{
            flex: 1 1 80%;
            display:flex; 
            color: #F36964;
            /* background:rgba(8,50,107,.5); */
            text-align:center;
            display:flex;
            flex-direction: row; 
            .img{ 
                flex:1 1 30%;
                align-content: flex-end;
                width: 11.8rem;
                height: 6.1rem; 
                position: relative;
                top:50%; 
                transform: translate( 0,-50%); 
                .bottom-top{
                    flex:1 1 70%;
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    justify-content:center; 
                    .right{
                    flex:1 1 50%; 
                    height: 5.1rem; 
                    overflow:hidden;
                    } 
                    .rate{ 
                        flex:1 1 50%;
                    } 
                } 
            } 
        }

        span{
          position: relative;
          /* top:-1rem; */
          font-size: 3.2rem;
          /* margin: 1rem; */
          color:#00F6FF;
        } 
`

const Content: FC<Partial<ICount>&{height?:string}> = function (props) {

    return (
        <Transport height={props.height}>
            <div className='top-text'>{props.text}</div>
            <div className='bottom-text'>
                <img className='img' src={props.ImgUrl} />
                <div className='bottom-top'>
                    <div className='right'>
                        <Count num={props.num!} unit={props.unit!} />
                    </div>
                    <div className='rate'> <CrossWiseRate comparisonText={props.comparisonText} upDownStatus={props.upDownStatus!} saleRate={props.saleRate!} /></div>
                </div>

            </div>

        </Transport>
    )
}

export default Content
